// ---------- 1、获取学生数据，并渲染到表格 -------------
async function renderStudent() {
    const { data:res } = await axios.get('/students')
    // console.log(res)
    let arr = res.data.map(item => {
        return `
        <tr>
            <td>${item.name}</td>
            <td>${item.age}</td>
            <td>${item.gender === 0? '男' : '女'}</td>
            <td>第${item.group}组</td>
            <td>${item.hope_salary}</td>
            <td>${item.salary}</td>
            <td>${item.province} ${item.city} ${item.area}</td>
            <td>
              <a href="javascript:;" class="text-success mr-3"><i data-id="${item.id}" class="bi bi-pen"></i></a>
              <a href="javascript:;" class="text-danger"><i data-id="${item.id}" class="bi bi-trash"></i></a>
            </td>
        </tr>
        `
        
    })
    document.querySelector('tbody').innerHTML = arr.join('');
}
renderStudent();


// 添加操作，需要提前准备，比如模态框的用法、省市县联动效果
// bootstrap模态框使用方法，两个步骤: 1. 实例化  2. 调用方法显示或隐藏
// let addModal = new bootstrap.Modal(模态框盒子)
let addModal = new bootstrap.Modal(document.querySelector('#modal'))

// addModal.show() // 让模态框显示
// addModal.hide() // 让模态框隐藏

// 点击 + 按钮的时候，让模态框显示
document.querySelector('#openModal').addEventListener('click', function () {
    // 重置表单
    document.querySelector('#form').reset();
    // 修改标题
    document.querySelector('#modal h5').innerHTML = '添加学员';
  addModal.show()
})


// 下面的函数，完成省市县的联动效果
async function initCity() {
    let province = document.querySelector('[name=province]');
    let city = document.querySelector('[name=city]');
    let area = document.querySelector('[name=area]');

    // 1、马上获取全部的省，渲染到第1个下拉框的位置
    const { data:res } = await axios.get('/api/province')
    // console.log(res)
    let arr = res.data.map(item => `<option value="${item}">${item}</option>`)
    province.innerHTML = '<option value="">--省份--</option>' + arr.join('');


    // 2、
    province.addEventListener('change', async function(){
        // 无论
        area.innerHTML = `<option value="">--地区--</option>`;
        let pname = province.value;
        if(pname === '') {
            return city.innerHTML = '<option value="">--城市--</option>';
        }
        const { data:res } = await axios.get('/api/city',{params: {pname}});
        // console.log(res)
        let arr = res.data.map(item => `<option value="${item}">${item}</option>`);
        city.innerHTML = '<option value="">--城市--</option>' + arr.join('')
    })

    // 3、
    city.addEventListener('change',async function () {
        let pname = province.value;
        let cname = city.value;
        if(cname === '') {
            return area.innerHTML = '<option value="">--地区--</option>'
        }
        const { data: res } = await axios.get('/api/area',{params: {pname, cname}});
        let arr = res.data.map(item => `<option value="${item}">${item}</option>`)
        area.innerHTML = '<option value="">--地区--</option>' + arr.join('');
    })
}
initCity();



// 点击弹层中的确认按钮的时候
document.querySelector('#submit').addEventListener('click', async function(e) {
    e.preventDefault();
    let data = val(document.querySelector('#form'));
    // console.log(data)
    // 把数据转化为数字类型
    data.age = Number(data.age);
    data.gender = +data.gender;
    data.group = +data.group;
    data.hope_salary = +data.hope_salary;
    data.salary = +data.salary;
    // 点击弹出层中的确认的时候，根据弹出层中的标题判断一下，是添加操作还是修改操作
    let title = document.querySelector('.modal-title').innerHTML
    if(title === '添加学员') {
        try {
            const {data:res} = await axios.post('/students',data);
            message.success(res.message) //使用插件提示
            renderStudent(); //重新获取页面数据，重新渲染
            addModal.hide();  //关闭弹窗
        } catch (e) {
            message.error('添加失败');
        }
         
    } else if (title === '修改学员') {
        try {
            let id = document.querySelector('.modal-title').dataset.id
            // 发送请求，进行修改
            const { data: res } = await axios.put(`/students/$  {id}`, data)
            message.success(res.message) // 使用插件提示
            modal.hide() // 关闭弹出层
            renderStudent() // 更新页面数据
        } catch (e) {
            message.error('修改失败')
        }
    }
    // ajax提交
    // try {
        
    // } catch (e) {
    //     message.error('添加错误')
    // }
})


//  ------------ 删除操作  | 修改操作 -------
document.querySelector('tbody').addEventListener('click', async function(e) {
    // 判断，点击的时候是否删除
    if(e.target.classList.contains('bi-trash')) {
        let id = e.target.dataset.id;
        // console.log('你点击的是删除',id)
        // 删除是敏感词，敏感词必须加提示
        if (!comfirm('确定删除嘛？')) return
        try {
            const { data: res } = await axios.delete(`/students/${id}`)
            message.success('删除成功')
            renderStudent()
        } catch (e) {
            message.error('删除错误')
        }
    }
    // 判断，点击是否为编辑
    if(e.target.classList.contains('bi-pen')) {
        let id = e.target.dataset.id
        // 修改标题
        document.querySelector('#modal h5').innerHTML = '修改学员';
        // 设置自定义属性，存储id
        document.querySelector('#modal h5').setAttribute('data-id',id);
        console.log('你点击的是编辑',id)
        addModal.show();  //点击编辑的时候，出现弹框
        // 要做数据回填 --> 首先的有数据 --> 根据 id 发送请求获取数据
        const { data:res} = await axios.get(`/students/${id}`);
        // console.log(res)
        // 在数据回填之前，应该把市、县都取出，渲染到第2、3个下拉框中
        let p1 = axios.get('/api/city',{params: {pname: res.data.province}})
        let p2 = axios.get('/api/area',{params: {pname: res.data.province, cname: res.data.city}})
        // const[{ data: { data:c}} , { data: { data:a }}] = await Promise.all([p1,p2]);
        // console.log(c)
        // console.log(a)
        const result = await Promise.all([p1,p2]);
        // console.log(result)
        // console.log(result[0].data.data)
        let arr2 = result[0].data.data.map(item => `<option value="${item}">${item}</option>`)
        document.querySelector('[name=city]').innerHTML = `<option value="">--城市--</option>` + arr2.join('');

        // console.log(result[1].data.data)
        let arr3 = result[1].data.data.map(item => `<option value="${item}">${item}</option>`)
        document.querySelector('[name=area]').innerHTML = `<option value="">--地区--</option>` + arr3.join('');

        // val(表单，数据)  传递两个参数，表示进行数据回填
        val(document.querySelector('#form'),res.data);
    }
})